<template>
  <div class="info_page">
    <div class="white_box">
      <div class="theme_txt">活动主题：{{ info.TaskInfo?.name }}</div>
      <img :src="info.TaskInfo?.textbook_cover" alt="" class="theme_img" />
      <div class="info_box">
        <div class="item_info dis_flex">
          <div class="info_txt ">活动当前状态</div>
          <div class="info_desc lecturer-status">{{ getStatus(info.TaskInfo?.status) }}</div>
        </div>
        <div class="item_info dis_flex" v-if="false">
          <div class="info_txt">使用课件PPT</div>
          <div class="info_desc dis_flex">
            <div class="type_file">情感与沟通技巧.ppt</div>
            <div class="check_btn">查看课件</div>
          </div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">培训讲座类型</div>
          <div class="info_desc">{{ info.TaskInfo?.type_name }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">活动发布时间</div>
          <div class="info_desc">{{ formatDate(info.TaskInfo?.time * 1000) }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">讲座发布人</div>
          <div class="info_desc">{{ info.TaskInfo?.user_name }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="info_txt">发布人身份</div>
          <div class="info_desc">{{ info.TaskInfo?.role_name }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="dis_flex">
            <div class="info_txt">我的参与情况</div>
            <div class="info_desc border_right width_97">{{ getAuditStatus(info.info?.audit_status) }}</div>
          </div>
          <div class="dis_flex">
            <div class="info_txt width_68">是否请假</div>
            <div class="info_desc width_68">{{ getLeaveStatus(info.info?.leave_status) }}</div>
          </div>
        </div>
        <div class="item_info condition_txt">活动各阶段参与情况</div>
        <div>
          <div class="dis_flex">
            <div class="stage_type flex1">是否已报名</div>
            <div class="stage_type flex1">报名审核</div>
            <div class="stage_type flex1">实施阶段</div>
          </div>
          <div class="dis_flex">
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <img src="@/assets/images/common/success_icon.png" alt="" class="stage_img" />
                <div class="stage_txt">已报名</div>
              </div>
              <div class="stage_time">{{ formatDate(info.info?.time * 1000) }}</div>
            </div>
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <img src="@/assets/images/common/success_icon.png" alt="" class="stage_img" />
                <div class="stage_txt">{{ getAuditStatus(info.info?.audit_status) }}</div>
              </div>
              <div class="stage_time">{{ info.info?.audit_time > 0 ? convertTimestampToDateTime(info.info.audit_time) :
                '--' }}
              </div>
            </div>
            <div class="stage_desc flex1">
              <div class="dis_flex">
                <!-- <img src="" alt="" class="stage_img" /> -->
                <div class="stage_txt">{{ getStatus(info.TaskInfo?.status) }}</div>
              </div>
              <div class="stage_time">{{ convertTimestampToDateTime(info.TaskInfo?.start_time) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 培训讲师介绍 -->
    <div class="head_label">
      <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
      <div class="label_txt">培训讲师介绍</div>
    </div>
    <div class="lecturer_box white_box">
      <div class="dis_flex">
        <div class="dis_flex">
          <img :src="info.TaskInfo?.lecturer_photo" alt="" class="lecturer_img" />
          <div class="dis_flex">
            <div class="lecturer_info">
              <div class="dis_flex">
                <div>{{ info.TaskInfo?.lecturer_name }}</div>
                <img src="@/assets/images/common/man.png" alt="" class="gender_icon" />
                <div>{{ info.TaskInfo?.lecturer_age }}岁</div>
              </div>
              <div class="lecturer_lable">标签：</div>
              <div class="lecturer_lable">
                {{ info.TaskInfo?.lecturer_label }}
              </div>
            </div>
            <!-- <img
                  src="@/assets/images/common/man.png"
                  alt=""
                  class="arrow_icon"
                /> -->
          </div>
        </div>
      </div>
      <div class="division_line"></div>
      <div class="lecturer_introduce">
        简介： {{ info.TaskInfo?.lecturer_introduce }}
      </div>

    </div>
  </div>
</template>
<script>
import { convertTimestampToDateTime } from '@/utils/time.js'
import { formatDate } from '@/utils/time.js'
export default {
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "报名中";
        if (ss == 2) return "培训中";
        if (ss == 3) return "已结束";
      };
    },
    getAuditStatus() {
      return (ss) => {
        if (ss == 1) return "审核中";
        if (ss == 2) return "已允许";
        if (ss == 3) return "已拒绝";
      };
    },
    getLeaveStatus() {
      return (ss) => {
        if (ss == 0) return '未申请'
        if (ss == 1) return "申请中";
        if (ss == 2) return "审核通过";
        if (ss == 3) return "审核拒绝";
      };
    }
  },
  methods: {
    convertTimestampToDateTime,
    formatDate,
  }
}
</script>
<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.flex1 {
  flex: 1;
}

.info_page {
  color: #333333;
}

.white_box {
  padding: 19px 10px;
  background: #ffffff;
  border-radius: 6.67px;
}

.theme_txt {
  font-size: 18px;
}

.theme_img {
  width: 100%;
  height: 166.33px;
  margin: 12px 0;
  // background: red;
}

.info_box {
  background: #ffffff;
  border: 0.33px solid #cccccc;
  border-radius: 3.33px;
}

.item_info {
  height: 33.67px;
  line-height: 33.67px;
  // padding: 10px 0;
  // border-bottom: 0.33px solid #cccccc;
  border-bottom: 0.0033rem solid #cccccc;
}

.info_txt {
  width: 97px;
  padding-left: 7.33px;
  border-right: 0.0033rem solid #cccccc;
  color: #666666;
}

.info_desc {
  padding-left: 10.33px;
}

.border_right {
  border-right: 0.0033rem solid #cccccc;
}

.width_68 {
  width: 68px;
}

.width_97 {
  width: 97px;
}

.type_file {
  color: #0090ff;
  font-size: 13.33px;
  line-height: 13.33px;
  text-decoration: underline;
}

.check_btn {
  width: 66.67px;
  height: 26.67px;
  line-height: 26.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #2e8ae6;
  border-radius: 5.33px;
  font-size: 12.67px;
  color: #ffffff;
  margin-left: 30px;
}

.condition_txt {
  color: #999999;
  font-size: 11.33px;
  text-align: center;
}

.stage_type {
  text-align: center;
  height: 33.33px;
  background: #f3f4f7;
  color: #555555;
  font-size: 13.33px;
  line-height: 33.33px;
  border-right: 0.33px solid #cccccc;

  &:last-child {
    border: 0;
  }
}

.stage_desc {
  padding: 0 12px;
  height: 66.33px;
  border-right: 0.33px solid #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  &:last-child {
    border: 0;
  }
}

.stage_img {
  width: 11.33px;
  height: 11.33px;
  margin-right: 4px;
  // background: red;
}

.stage_txt {
  color: #14c76a;
  font-display: 12px;
  line-height: 12px;
}

.stage_time {
  color: #555555;
  font-size: 12px;
  margin-top: 12px;
}

.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.lecturer_box {
  padding: 20px 10px 14px 10px;
}

// .lecturer_info {
//   // margin-bottom: 10px;
//   min-width: 80%;
//   background: red;
// }
.arrow_icon {
  width: 8.67px;
  height: 16px;
  margin-left: 17px;
}

.division_line {
  border-bottom: 0.33px solid #dddddd;
  margin: 16px 0;
}

.lecturer_introduce {
  line-height: 28px;
  font-size: 14px;
}

.lecturer_img {
  width: 63.33px;
  height: 63.33px;
  border-radius: 8px;
  margin-right: 10.33px;
  background: red;
}

.gender_icon {
  width: 16.67px;
  height: 16.67px;
  margin: 0 9px;
}

.lecturer_age {
  font-size: 14.67px;
}

.lecturer_lable {
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%;
}

.lecturer-status {
  color: #FF9500;
}
</style>